<template>
	<view class="guid-nav flex-row-center">
		<view class="footer-icon-style">
			<view class="footer-icon" v-for="(item,index) in navOptions" :key="index" @click="textClick(index)" :style="{minWidth: iconMargin}">
				<!-- /static/sample/collect.png -->
				<!-- /static/sample/label.png -->
				<image :src="item.imgUrl" mode=""  v-if="item.imgUrl"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<view class="footer-btn">
			<button class="flex-col-center" v-for="(item,index) in buttonOptions" :key="index" @click="buttonClick(index)" :style="{backgroundColor:item.bgColor}">
				<!-- /static/sample/share.png -->
				<image :src="item.imgUrl" mode="" v-if="item.imgUrl"></image>
				{{item.text}}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:'guid-nav',
		props:{
			iconMargin:'',
			navOptions:{
				type:Array,
				default:[]
			},
			buttonOptions:{
				type:Array,
				default:[]
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			
			textClick(index){
				this.$emit('textClick',index)
			},
			buttonClick(index){
				this.$emit('buttonClick',index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.guid-nav{
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: calc(112rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
		// display: flex;
		.footer-icon-style{
			display: flex;
			justify-content: space-around;
		}
		.footer-icon {
			
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			min-width: 98rpx;
			
			&:first-of-type {
				margin-left: 30rpx;
			}
			// &:nth-of-type(2) {
			// 	margin-left: 54rpx;
			// 	margin-right: 32rpx;
			// }
			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 10rpx;
			}
			text {
				font-size: $text-size;
				font-weight: Regular;
				color: #656371;
			}
		}
		.footer-btn {
			flex:1;
			margin-left: 20rpx;
			margin-right: 20rpx;
			display: flex;
			button {
				flex:1;
				height: 92rpx;
				background: #05C160;
				border-radius: 100rpx;
				font-size: 28rpx;
				font-weight: $Semibold;
				color: #FFFFFF;
			}
			button+button{
				margin-left: 10rpx;
			}
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>